<!--
 * @Author: ChunLai
 * @Date: 2023-08-04 11:07:33
 * @LastEditTime: 2025-09-08 14:14:52
 * @Description: 多图上传
 * @FilePath: \02.bldinsure\src\views\upload\components\uploadMultiFileBox.vue
-->
<template>
  <div class="w100">
    <div class="viewBox">
      <van-image
        class="viewItem"
        v-for="(item, index) in imgUrl"
        :key="index"
        width="70"
        height="70"
        :src="item"
      >
        <MsImgIcon
          name="clear"
          class="closeIco"
          @click.native="closeImg(index)"
        />
      </van-image>
    </div>
    <div class="upItem2">
      <van-uploader :max-count="1" :deletable="false" :after-read="afterRead">
      </van-uploader>
    </div>
  </div>
</template>

<script>
export default {
  name: "uploadMultiFileBox",
  props: {
    /**文件类型 */
    type: "",
    /** 图片类型 */
    imgType: "",
    imgSrc: {
      type: [String, Array],
      default: "",
    },
  },
  data() {
    return {
      imgUrl: "",
      ocr_flag: "", //证件，银行卡 ocrFlag，未识别不传，识别失败传0，识别成功传1
    };
  },
  watch: {
    imgSrc(val) {
      // console.log(val);
      this.imgUrl = val.split(",");
    },
  },
  created() {
    this.imgUrl = [];
  },
  methods: {
    /**压缩上传图片 */
    afterRead(file) {
      if (file.file.size > 204800) {
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content;
        img.onload = () => {
          const whRatio = img.width / img.height;
          const nw = 750;
          const nh = Math.ceil(nw / whRatio);
          canvas.width = nw;
          canvas.height = nh;
          context.drawImage(img, 0, 0, nw, nh);
          file.content = canvas.toDataURL(file.file.type, 0.92);
          this.getImgOssUrl(file.content);
        };
      } else {
        this.getImgOssUrl(file.content);
      }
    },
    /**获取OSS图片地址 */
    getImgOssUrl(imgBase) {
      let pic_base64 = imgBase
        .replace(new RegExp("image/jpeg", ""), "image/jpg")
        .replace(new RegExp("image/png", ""), "image/jpg");
      this.$store.commit("updateLoadTxt", "正在上传，请稍后");
      this.$store.dispatch("apis/fileAdminUpload", pic_base64).then((res) => {
        let picUrl = res.url;
        if (!res.url && res.data) {
          picUrl = res.data.cospath;
        }
        this.saveImgInfo(picUrl);
      });
    },
    /**删除图片 */
    closeImg(index) {
      this.imgUrl.splice(index, 1);
      let imgUrl = this.imgUrl;
      let params = {
        ...this.apiComParams,
        imgType: this.imgType,
        userId: "",
        imgUrl: imgUrl.join(","),
        type: this.type,
        ocrFlag: "",
      };
      this.saveImgApi(params, imgUrl);
    },
    /**保存图片 */
    saveImgInfo(picUrl) {
      let imgUrl = this.imgUrl.concat(picUrl);
      let params = {
        ...this.apiComParams,
        type: this.type,
        imgType: this.imgType,
        imgUrl: imgUrl.join(","),
        idNum: "",
        ocrFlag: "",
      };
      if (this.isNewApiProcedure === "1") {
        params.newFlag = "1";
      }
      this.saveImgApi(params, imgUrl);
    },
    saveImgApi(params, imgUrl) {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "saveImg",
        })
        .then((res) => {
          this.imgUrl = imgUrl;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.upItem2 {
  display: flex;
  flex-wrap: wrap;
  /deep/.van-uploader__upload {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    background-color: #f2f2f2;
  }
}

.viewBox {
  display: flex;
  flex-wrap: wrap;

  .closeIco {
    position: absolute;
    right: -7px;
    top: -7px;
    z-index: 5;
  }

  .viewItem {
    padding: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    &::after {
      content: " ";
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 5px;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      border: 1px solid #e5e5e5;
    }
  }
}
</style>
